<template>
  <u-popup v-model="twoShow" mode="bottom" @close='close'>
    <view class="marketPrice">
      <view class="title">扭蛋图极客闪卡1-100号款卡</view>
      <view class="box-content">
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="left">
            <image :src="$util.img(item.image)" mode="widthFix"></image>
            <view class="name">{{ item.name }}</view>
          </view>
          <view class="right">{{ item.amount }}</view>
        </view>
      </view>
    </view>
  </u-popup>
</template>

<script>
export default {
  props: {
    show: {
      type: [String, Boolean],
      default: false
    }
  },
  watch: {
    show: {
      handler(newval, oldVal) {
        this.twoShow = this.show;
      },
      immediate: true
    }
  },
  data() {
    return {
      twoShow: false,
      num: 0,
      list: []
    }
  },
  mounted() {
    this.getinfo();
  },
  methods: {
    close() {
      this.$emit('close')
    },
    getinfo() {
      this.$http.asyncSendrequest({
        url: '/order/sellPrice',
        success: res => {
          this.list = res.data;
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.marketPrice {
  height: 80vh;
  width: 100%;
  border-radius: 10rpx 10rpx 0 0;
  background: #f8f8f8;
  padding-bottom: 30rpx;
  overflow: hidden;

  .title {
    width: 100%;
    padding: 50rpx 30rpx 60rpx;
    background: #fff;
    font-size: 36rpx;
    font-weight: bold;
    height: 160rpx;
  }

  .box-content {
    margin-top: 30rpx;
    overflow-y: scroll;
    height: calc(100% - 190rpx);

    .item {
      margin: 0 30rpx 30rpx;
      border-radius: 10rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20rpx 30rpx;
      background: #fff;

      .left {
        display: flex;
        align-items: center;

        image {
          width: 40rpx;
          margin-right: 30rpx;
        }

        .name {
          font-size: 26rpx;
        }
      }

      .right {
        font-size: 28rpx;
        font-weight: bold;
        color: red;
      }
    }
  }
}
</style>